import { memo, useEffect, useState } from "react";
import HeaderRightWrapper from "./style";
import IconGlobal from "../../../asset/svgs/icon_global";
import IconMenu from "../../../asset/svgs/icon_menu";
import IconAvatar from "../../../asset/svgs/icon_avatar";

const HeaderRight = memo(
    () => {
        let [showPanel, setShowPanel] = useState(false);
        useEffect(() => {
            const DisplayEvent = () => {
            setShowPanel(false);
            }

            window.addEventListener('click',DisplayEvent, true);

            return () => {
                window.removeEventListener('click', DisplayEvent, true);
            }
        },[])
        const handelShow = () => {
            setShowPanel(true);
        }
        return (
                <HeaderRightWrapper>
                <div className="btns">
                  <span className="login">登录</span>    
                  <span className=" register">注册</span>
                  <span className="global"> <IconGlobal></IconGlobal></span>
                </div>
                <div className="profile" onClick={handelShow}>
                    <IconMenu></IconMenu>
                    <IconAvatar></IconAvatar> 
                    {
                        showPanel && (
                            <div className="panel">
                        <div className="top">
                           <div className="item">注册</div>
                           <div className="item">登录</div>
                        </div>
                        <div className="bottom">
                            <div className="item">
                                帮助中心
                           </div>
                        </div>
                    </div>
                        )
                    }
                </div>
               </HeaderRightWrapper>
            
        )
    }
)

export default HeaderRight;